<template>
    <div class="ddd">
        <div class="mg-content">
             <el-row :gutter="20" class="addRow">
                <el-col :span="6">
                  <div  class="text-left">
                        <el-button v-hasPermission="'management_memberCardType:create'"  class="title-button btn-primary" size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新建&nbsp;</el-button>
                  </div>
                </el-col>
            </el-row>
          <div class="c-5" v-if="!tableData || tableData.length<=0">暂无数据</div>

            <div style="display:flex;flex-wrap:wrap" v-else>
                <div class="item_card" v-for="(item,index) in tableData" >
                    <div class="text-left" style="padding:10px 15px;background:rgb(213,226,247);font-size:16px">{{item.name}}</div>
                    <el-row style="padding-top:10px;padding-bottom:10px">
                        <el-col :span="8" class="text-right">折扣方案:</el-col>
                      <el-col :span="2">&nbsp;</el-col>
                      <el-col :span="10" class="text-left"><span v-if="item.discountName">{{item.discountName}}</span><span v-else>无</span></el-col>
                    </el-row>
                    <el-row style="padding-bottom:10px" >
                        <el-col :span="8" class="text-right">会员价:</el-col>
                      <el-col :span="2">&nbsp;</el-col>
                        <el-col :span="10" class="text-left"><span v-if="item.hasVipPrice">启用</span><span v-else>不启用</span></el-col>
                    </el-row>
                    <el-row style="padding-bottom:10px">
                        <el-col :span="8" class="text-right">消费返积分:</el-col>
                      <el-col :span="2">&nbsp;</el-col>
                        <el-col :span="10" class="text-left"><span v-if="item.hasConsumeRecharge">消费{{item.consumePrice}}元返{{item.giftPoint}}积分</span><span v-else>不启用</span></el-col>
                    </el-row>
                    <el-row style="padding-bottom:10px">
                        <el-col :span="8" class="text-right">充值规则:</el-col>
                      <el-col :span="2">&nbsp;</el-col>
                      <el-col :span="10" class="text-left"><span v-if="item.rechargeRule">{{item.rechargeType.text}}</span><span v-else>不启用</span></el-col>
                    </el-row>
                    <div style="padding:2px;border-top:1px solid rgb(213,226,247);background:rgb(245,245,245)" class="center-center">
                            <div>
                                <el-button v-hasPermission="'management_memberCardType:update'" type="text" @click="addShow=true;activityId=item.id"><i class="icon icon-xiugai-copy"></i></el-button>
                            </div>
                            <div style="width:20px;color:#409EFF">|</div>
                            <div>
                                <el-button v-hasPermission="'management_memberCardType:destory'" type="text" @click="handleDelete(index,item)"><i class="icon icon-delete"></i></el-button>
                            </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- <model :isShow="addShow" @close="addClose" @addSuccess="addSuccess"></model> -->
        <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
      <PluginConfirm
        :show="dialogIsShow"
        @chooseSure="chooseSure()"
        @chooseCancel="chooseCancel()"
        @dialogResult="dialogResult">
      </PluginConfirm>
    </div>
</template>

<script>
import model from "./model.vue";
export default {
  data() {
    return {
      addShow: false,
      activityId:"",
      tableData:[],
      delId:"",
      dialogIsShow:false,
      curDataIndex:""
    };
  },
  created(){
    this.getData();
  },
  methods: {
    dialogResult(param){
      this.dialogIsShow=param.close;
      if(param.choose==="ok"){
        //console.log("确定");
        this.$axios.delete("members/memberCardTypes/"+this.delId).then(data=>{
          if(data.status==200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getData();
          }else{
            this.$message({
              type: 'error',
              message: data.message
            });
          }
        })
      }else if(param.choose==="cancel"){
        //console.log("取消");
      }else{
        //console.log("不做处理");
      }
    },
    handleDelete(index,row) {
      // this.selectItemDetailsIndex=delIndex;
      this.delId=row.id;
      this.dialogIsShow=true;
    },
    addSuccess(item) {
      this.addShow = false;
      this.getData();
    },
    addClose() {
      this.addShow = false;
    },
    getData(){
      this.loading=true;
      this.$axios.get("members/memberCardTypes").then((data)=>{
        this.loading=false;
        if(data.success){
          this.tableData=data.content
        }

      }).catch(function(err){
      })
    },
  },
  components: {
    model
  }
};
</script>

<style>
  .addRow{
    background-color: #f5f6f7;
    background-image: linear-gradient(to bottom,#fff 0,#f5f6f7 100%);
  }
  .item_card{
    width:22%;border:1px solid rgb(213,226,247);
    margin-top:20px;font-size: 13px;
    margin-left: 0px;
    margin-right: 40px;
  }

</style>
